<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>智能图书平台</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='facelogin.css') }}">

</head>

<body>
    <div class="form-wrapper">
        <div class="header">
            人脸登陆
        </div>
        <div class="input-wrapper">
            <div class="border-wrapper">
                <input type="text" name="userName" placeholder="用户名" class="border-item" autocomplete="off"
                    id="username">
            </div>
        </div>
        <div class="action">
            <button class="btn" onclick="openMedia()">打开摄像头</button>
            <button class="btn" id="login">登陆</button>
        </div>
        <div class="action">
            <button class="btn" id="register" onclick="location.href='/face_register'">信息录入</button>
        </div>
        <div class="icon-wrapper"></div>
        <div class="text">欢迎使用人脸登陆</div>
    </div>

    <div class="facelogin">
        <div class="input-face">
            <video style="display: none; border-radius:50%; position: relative; left: 15px; top: 15px" class="src-video"
                width="520px" height="520px" autoplay="autoplay"></video>
            <!--设置一个画布，动态的将图片信息展示在画布上-->
            <canvas id="canvas" width="520px" height="520px" style="display: none"></canvas>
            <img src="" class="photo" style="display: none" id="pic">
        </div>
    </div>


</body>


<script type="text/javascript" src="{{url_for('static',filename = 'jquery-1.9.1.min.js')}}"></script>
<script>
    var srcVideo = document.querySelector("video.src-video");
    var isOpened = false; // 判断摄像头是否已经打开
    var usernameElement = document.getElementById("username");


    var openMedia = function () {
        srcVideo.style.display = "block";
        if (navigator.mediaDevices === undefined) {
            alert("Your browser cannot using camera!");
            return;
        }
        var constrains = {
            audio: false,
            video: { width: 300, height: 300 }
        }
        //navigator.mediaDevices.getUserMedia(constrains) JavaScript 自带的访问用户摄像头等媒体设备的接口
        var mediaPromise = navigator.mediaDevices.getUserMedia(constrains);
        mediaPromise.then(function (stream) {
            srcVideo.srcObject = stream;
            srcVideo.play();
            isOpened = true //摄像头已打开
        }).catch(function (err) {
            alert(arr);

        })
    }

    //点击确定登录
    var btn = document.getElementById("login");
    //设置图片展示标签
    var photo = document.querySelector("img.photo");

    btn.onclick = function () {
        var usernameValue = usernameElement.value;
        //点击确定注册前用户需要输入用户名
        //获取用户输入的用户名
        var username = $("#username").val();
        //测试数据是否输入成功
        // alert(username);
        if (username !== "") {
            //判断摄像头是否打开
            if (!isOpened){
                alert("请打开摄像头进行登录！");
                return;
            }
            //获取某一帧的图片即拍照
            //定位画布
            var canvas = document.querySelector("#canvas");
            //获取画布元素，进行图片的控制
            var ctx = canvas.getContext("2d");
            //拿到登录者面部信息
            ctx.drawImage(srcVideo, 0, 0, 300, 300);//将图片绘制到画布上
            //将画布中绘制的图片信息展示到img标签中
            photo.src = canvas.toDataURL();
            var userImgSrc = photo.src;



            //异步请求ajax
            $.ajax({
                url: "face_login",//请求发送地址
                type: "post",
                data: {
                    "userName": username,
                    "userImgSrc": userImgSrc
                },
                //同步请求
                async: false,
                success: function (res) {
                    if (res.result === "1") {
                        alert("人脸登录成功！");
                        var url = "{{url_for('index_user', username='username_placeholder', value=1)}}";
                        url = url.replace("username_placeholder", usernameValue);
                        location.href = url;
                    } else if (res.result === "-1") {
                        alert("人脸识别失败请重新登录!");
                    } else if (res.result === "0") {
                        alert("用户未录入信息!");
                        location.href = "/face_register";
                    } else {
                        alert("系统异常");
                    }
                }
            })
        } else {
            alert("请输入用户名再登录！");
        }
    }

    //定时器
    // setInterval(btn.onclick,3000);
</script>

</html>